<template>
  <div>
    <ul>
      <li title="randomArticle">
        <ele-icon icon-name="icon-article" :href="randomArticle" ele-name="Articles"></ele-icon>
      </li>
      <li title="randomAuthor">
        <ele-icon icon-name="icon-affiliation" :href="randomAuthor" ele-name="Affiliations"></ele-icon>
      </li>
      <li title="randomAffiliation">
        <ele-icon icon-name="icon-authors" :href="randomAffiliation" ele-name="Authors"></ele-icon>
      </li>
    </ul>
  </div>
</template>

<script>
import EleIcon from "./EleIcon";

import {
  randomArticle,
  randomAuthor,
  randomAffiliation
} from '@/js/randomPath.js';

import '@/assets/icons/article.svg';
import '@/assets/icons/affiliation.svg';
import '@/assets/icons/authors.svg';

export default {
  name: "Icons",

  props: {

  },
  data() {
    return {

    };
  },
  computed: {
    randomArticle,
    randomAuthor,
    randomAffiliation
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {
    EleIcon
  },
};
</script>

<style scoped lang="scss">
  ul {
    display: flex;
    flex-grow: row nowrap;
    list-style-type:none;
    li {
      margin: 13px;
    }
  }
</style>
